<template>
    <my-header navText="有奖问卷" bgColor="#fff"></my-header>
    <view class="container-source">
        <view class="title-content">
            <view class="title">玻色有奖小调研</view>
            <view class="sub-title">填写问卷，将免费赠送您<text style="color: #2A65FF">5个100bit真机配额</text></view>
        </view>
        <view class="p-source">
            <view class="title">您是从什么途径知晓我们的？<text style="color: red;font-size: 16px;">*</text></view>
            <view class="source-list">
                <view class="item-list" v-for="(item, index) in sourceData" :key="item.id" @click="selectSource(index, item)" :class="item.active ? 'item-list-active' : ''">
                    <text class="item">{{ item.channel_name }}</text>
                </view>
            </view>
        </view>
        <view class="sub-source" v-if="submitInfo.primary_channel_id !== ''">
            <view class="title" :style="{paddingBottom: sourceSubData.length === 0 ? '12px' : ''}">{{ subTitle }}<text style="color: red;font-size: 16px;">*</text></view>
            <view class="source-list" v-if="sourceSubData.length > 0">
                <view class="sub-item-list" v-for="(item, index) in sourceSubData" :key="item.id" @click="selectSubSource(index, item)" :class="item.active ? 'sub-item-list-active' : ''">
                    <text class="item">{{ item.channel_name }}</text>
                </view>
            </view>
            <up-input
                v-else
                placeholder="请在此处填写内容"
                placeholderClass="myPlaceholder"
                border="surround"
                maxlength="50"
                v-model="submitInfo.channel_description"
            ></up-input>
        </view>
        <view class="sub-source" v-if="secondItem.input_type === 'input'">
            <view class="title" style="padding-bottom: 12px;">{{ subOtherTitle }}<text style="color: red;font-size: 16px;">*</text></view>
                <up-input
                    placeholder="请在此处填写内容"
                    placeholderClass="myPlaceholder"
                    border="surround"
                    maxlength="50"
                    v-model="submitInfo.channel_description"
                ></up-input>
        </view>
        <view class="btn" :class="isActive ? 'btn-active': 'btn-no-active'" @click="isActive ? submitSource() : ''">提交</view> 
    </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useUserStore } from '@/stores'
import { getSourceDicAPI, submitSourceAPI } from '@/api/source'

const userStore = useUserStore()
const subTitle = ref('')
const subOtherTitle = ref('')
const submitInfo = ref<any>({
    primary_channel_id: '',
    secondary_channel_id: '',
    channel_description: ''
})
const sourceData = ref<any>([])
const sourceSubData = ref<any>([])
const isActive = ref(false)
const secondItem = ref<any>({
    input_type: 'default'
})

// 监听表单数据变化实时更新提交按钮状态
watch(
    () => submitInfo.value,
    (newVal) => {
        if (!newVal.primary_channel_id) {
            isActive.value = false
            return
        }
        
        if (sourceSubData.value.length > 0) {
            // 有二级选项的情况
            if (!newVal.secondary_channel_id) {
                isActive.value = false
                return
            }
            
            // 选择了"其他"选项需要填写描述
            if ((newVal.secondary_channel_id === 16 || newVal.secondary_channel_id === 27) && !newVal.channel_description) {
                isActive.value = false
                return
            }
        } else {
            // 无二级选项时需要填写描述
            if (!newVal.channel_description) {
                isActive.value = false
                return
            }
        }
        
        isActive.value = true
    },
    { immediate: true, deep: true }
)
// 获取来源字典
const getSourceDic = (id?: number) => {
    const params = {
        pid: id ? id : ''
    }
    getSourceDicAPI(params).then((res: any) => {
        if (id) {
            sourceSubData.value = res
        } else {
            sourceData.value = res
        }
    })
}
getSourceDic()

// 这里是用于存储来源数据的响应式变量
const selectSource = (index: number, item: any) => {
    secondItem.value = {
        input_type: 'default'
    }
    submitInfo.value = {
        primary_channel_id: item.id,
        secondary_channel_id: '',
        channel_description: ''
    }
    subTitle.value = item.channeld_desc
    getSourceDic(item.id)
    const addActiveFlag = (data: any[]) => {
        data.forEach(item => {
            item.active = false
            if (item.children) {
                addActiveFlag(item.children)
            }
        });
    };
    addActiveFlag(sourceData.value)
    sourceData.value[index].active = true
}
// 选择渠道来源子集
const selectSubSource = (index: number, item: any) => {
    secondItem.value = item
    submitInfo.value.secondary_channel_id = item.id
    submitInfo.value.channel_description = ''
    const addActiveFlag = (data: any[]) => {
        data.forEach(item => {
            item.active = false
            if (item.children) {
                addActiveFlag(item.children)
            }
        });
    };
    addActiveFlag(sourceSubData.value)
    sourceSubData.value[index].active = true
    subOtherTitle.value = item.channeld_desc
}

// 提交用户来源
const submitSource = () => {
    const params = {
        primary_channel_id: submitInfo.value.primary_channel_id,
        secondary_channel_id: submitInfo.value.secondary_channel_id,
        channel_description: String(submitInfo.value.channel_description)
    }
    submitSourceAPI(params).then((res) => {
        userStore.userInfo.is_user_channel = true
        uni.showToast({
            title: '提交成功',
            icon:'success',
            duration: 2000
        })
        setTimeout(() => {
            uni.navigateTo({
                url: '/pagesA/source/success'
            })
        }, 100)
    }).catch((error) => {
        if (error.code && error.code === '200') {
            userStore.userInfo.is_user_channel = true
        }
    })
}
</script>
<style lang="scss" scoped>
.container-source {
    padding: 20px;
    font-family: 'PingFang SC'; 
    .title-content {
        .title {
            font-size: 18px;
            font-weight: 500;
            line-height: 26px;
            letter-spacing: 0px;
            font-variation-settings: "opsz" auto;
            color: rgba(0, 0, 0, 0.9);   
        }  
        .sub-title {
            font-size: 14px;
            line-height: 22px;
            letter-spacing: 0px;
            font-variation-settings: "opsz" auto;
            color: rgba(0, 0, 0, 0.6);   
            padding-top: 4px;
        }  
    }
    .sub-source, .p-source {
        padding-top: 24px;
        .title {
            font-size: 15px;
            font-weight: 500;
            line-height: 23px;
            letter-spacing: 0px;
            font-variation-settings: "opsz" auto;
            color: rgba(0, 0, 0, 0.9);   
        } 
        .source-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 12px;
            // justify-content: flex-start;
            // justify-content: space-between;
            .item-list {
                // margin-top: 12px;
                min-width: 98px;
                // height: 32px;
                border-radius: 4px;
                opacity: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 5px 0;
                gap: 10px;
                // box-sizing: border-box;
                border: 1px solid #DEDEDE;
                font-size: 14px;
                font-weight: normal;
                line-height: 22px;
                letter-spacing: 0px;
                color: rgba(0, 0, 0, 0.9);
            }
            
            .item-list-active {
                min-width: 100px;
                background: rgba(42, 101, 255, 0.1);
                color: #2A65FF;
                border: none;
                // padding: 6px 1px;
            }
            .sub-item-list {
                border-radius: 4px;
                opacity: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 5px 16px;
                gap: 10px;
                border: 1px solid #DEDEDE;
                font-size: 14px;
                font-weight: normal;
                line-height: 22px;
                letter-spacing: 0px;
                color: rgba(0, 0, 0, 0.9);
            }
            .sub-item-list-active {
                padding: 6px 17px;
                background: rgba(42, 101, 255, 0.1);
                color: #2A65FF;
                border: none;
            }
            
        }
        ::v-deep .myPlaceholder {     
            color: rgba(0, 0, 0, 0.4);
            font-size: 14px;
        }
    }
    // .p-source {
        /* 从第2个元素开始，每隔3个设置样式 */
        // .item-list:nth-child(3n+2) {
            // margin: 12px 16px 0;
        // }
    // }
    .sub-source {
        .source-list {
            // justify-content: flex-start;
            gap: 10px;
        }
    }
    .btn {
        width: 100%;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 14px 0;
        font-size: 15px;
        font-weight: 500;
        margin-top: 32px;
    }
    .btn-active {
        background: #2A65FF;
        color: rgba(255, 255, 255, 0.95);
    }
    .btn-no-active {
        background: #F6F6F6;
        color: rgba(0, 0, 0, 0.4);
    }
}
</style>